<template>
	<view>
		<u-sticky>
			<view class="tab_nav">
				<nav-bar
					nav_btn="back"
					:index="index"
					:title="title"
					@onPicker="onPicker"
					:showPicker="showPicker"
					:color="color"
					:placeholder="placeholder"
					:list="list"
					:auto_img="image"
					:background="background"
				></nav-bar>
			</view>

			<view style="background: #fff">
				<!-- 搜索 -->
				<view style="background: #fff; padding-bottom: 30rpx">
					<view class="flex align-center" style="margin: 0 32rpx 0 32rpx; background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
						<view style="font-size: 0; margin-right: 14rpx">
							<image style="width: 40rpx; height: 40rpx" src="./static/10.png"></image>
						</view>
						<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder-style="font-size: 24rpx" placeholder="姓名/电话/昵称搜索" />
					</view>
				</view>
				<view style="height: 0; overflow: hidden" class="head_riqi_box w750 flex">
					<uni-datetime-picker ref="time1" type="date" :value="startDate" start="2021-3-20" end="2111-6-30" @change="change" />
					<view class="zhi_txt s26 family f500">至</view>
					<uni-datetime-picker ref="time2" type="date" :value="endDate" start="2021-3-20" end="2111-6-30" @change="change1" />
					<view class="shaixuan_btn s24 family f500 txtali" @click="screen">筛选</view>
				</view>
				<view class="menu" v-if="identity == 2" @click="gotosh">
					<view class="left">
						<view class="img">
							<image src="@/static/merberSh.png" style="width: 100%; height: 100%"></image>
						</view>
						<view class="text">店铺会员审核</view>
					</view>
					<view class="right">
						<uni-badge size="normal" :text="textNum" type="error" />
						<uni-icons type="arrow-right" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<!-- navBar -->
				<view class="flex align-center justify-between" style="padding: 40rpx 32rpx 32rpx; background-color: #f4f5f9">
					<view class="flex">
						<view @click="changeNavIndex(0)" class="flex align-center" style="margin-right: 32rpx">
							<view style="font-size: 0">
								<image v-if="navIndex == 0 && sort == 2" style="width: 24rpx; height: 24rpx" src="static/29.png"></image>
								<image v-if="navIndex == 0 && sort == 1" style="width: 24rpx; height: 24rpx" src="static/30.png"></image>
								<image v-if="navIndex != 0" style="width: 24rpx; height: 24rpx" src="static/28.png"></image>
							</view>
							<view style="font-size: 26rpx" :style="navIndex == 0 ? 'color: #333;' : 'color: #999;'">解锁总金额排行</view>
						</view>
						<view @click="changeNavIndex(1)" class="flex align-center">
							<view style="font-size: 0">
								<image v-if="navIndex == 1 && sort == 2" style="width: 24rpx; height: 24rpx" src="static/29.png"></image>
								<image v-if="navIndex == 1 && sort == 1" style="width: 24rpx; height: 24rpx" src="static/30.png"></image>
								<image v-if="navIndex != 1" style="width: 24rpx; height: 24rpx" src="static/28.png"></image>
							</view>
							<view style="font-size: 26rpx" :style="navIndex == 1 ? 'color: #333;' : 'color: #999;'">已解锁金额排行</view>
						</view>
					</view>
					<view @click="changeNavIndex(2)" class="flex align-center">
						<view style="font-size: 0; margin-right: 4rpx">
							<image style="width: 24rpx; height: 24rpx" src="./static/23.png"></image>
						</view>
						<view class="nav-item" style="font-size: 26rpx; color: #333">筛选</view>
						<view style="font-size: 0; margin-left: 8rpx">
							<image :class="['arrow', { showv: showv }]" src="/static/down.svg"></image>
						</view>
					</view>
				</view>

				<!-- 点击筛选时间 -->
				<view v-if="showTime" class="flex flex-clom">
					<view style="flex: 1; background: rgba(0, 0, 0, 0.1)" @click="showTime = false">
						<view @click.stop="">
							<view style="height: 2rpx; background: #f2f2f2"></view>
							<view style="background: #ffffff; padding: 32rpx 32rpx 40rpx 32rpx">
								<view style="font-size: 26rpx; font-weight: 700; color: #000000; margin-bottom: 30rpx">按时间筛选</view>
								<view class="flex align-center justify-between">
									<view
										@click="clickTime(1)"
										class="flex align-center justify-evenly"
										style="width: 284rpx; height: 64rpx; border-radius: 8rpx 8rpx 8rpx 8rpx; border: 1rpx solid #cccccc"
									>
										<view style="font-size: 0">
											<image style="width: 24rpx; height: 24rpx" src="./static/26.png"></image>
										</view>
										<view :style="startDate ? 'color: #999999;font-size:28rpx;' : 'font-size:24rpx;color: #CCCCCC;'">
											{{ startDate ? startDate : '请选择' }}
										</view>
										<view style="font-size: 0" @click.stop="startDate = ''">
											<image style="width: 22rpx; height: 22rpx" src="./static/27.png"></image>
										</view>
									</view>
									<view style="width: 63rpx; height: 2rpx; background: #666666"></view>
									<view
										@click="clickTime(2)"
										class="flex align-center justify-evenly"
										style="width: 284rpx; height: 64rpx; border-radius: 8rpx 8rpx 8rpx 8rpx; border: 1rpx solid #cccccc"
									>
										<view style="font-size: 0">
											<image style="width: 24rpx; height: 24rpx" src="./static/26.png"></image>
										</view>
										<view :style="startDate ? 'color: #999999;font-size:28rpx;' : 'font-size:24rpx;color: #CCCCCC;'">
											{{ endDate ? endDate : '请选择' }}
										</view>
										<view style="font-size: 0" @click.stop="endDate = ''">
											<image style="width: 22rpx; height: 22rpx" src="./static/27.png"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="flex">
								<view
									@click="
										startDate = '';
										endDate = '';
									"
									class="flex align-center justify-center reset"
								>
									重置
								</view>
								<view @click="screen" class="flex align-center justify-center confirm">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 搜索 -->
		<view :class="[identity == 2 ? 'boxs1' : 'boxs']">
			<view class="warp">
				<view class="item">
					<view class="text1">
						{{ total }}
					</view>
					<view class="text2">会员总人数</view>
				</view>
				<view class="item">
					<view class="text1">
						{{ quota_total }}
					</view>
					<view class="text2">锁定总金额</view>
				</view>
				<view class="item">
					<view class="text1">
						{{ rebate_total }}
					</view>
					<view class="text2">已返还总额</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view
			class=""
			v-for="(item, index) in peopleList"
			:key="index"
			style="margin: 0 32rpx 20rpx 32rpx; background: #fff; border-radius: 12rpx; padding: 28rpx 32rpx"
			@click="gotoF(item.id)"
		>
			<view class="flex align-center justify-between">
				<view class="flex align-center">
					<view style="font-size: 0; margin-right: 14rpx">
						<image style="width: 36rpx; height: 36rpx; border-radius: 50%" :src="item.avatar"></image>
					</view>
					<view style="font-size: 26rpx; font-weight: 500; color: #333">{{ item.nickname }}{{ item.name ? `（${item.name}）` : '' }}</view>
				</view>
				<view class="flex align-center">
					<view style="font-size: 24rpx; color: #333333">
						{{ item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3') }}
					</view>
					<view @click.stop="call(item.mobile)" style="font-size: 0; margin-left: 20rpx">
						<image style="width: 36rpx; height: 36rpx" src="static/13.png"></image>
					</view>
				</view>
			</view>
			<view style="height: 2rpx; background: #f4f4f4; margin: 28rpx 0"></view>
			<view class="flex align-center justify-between" style="font-size: 24rpx">
				<view class="flex align-center">
					<view style="color: #999">锁定总金额</view>
					<view style="color: #333; margin-left: 12rpx">￥{{ item.quota }}</view>
				</view>
				<view class="flex align-center">
					<view style="color: #999">已返还金额</view>
					<view style="color: #333; margin-left: 12rpx">￥{{ item.rebate }}</view>
				</view>
			</view>
		</view>
		<view v-if="peopleList.length != 0" style="padding: 28rpx 0; text-align: center; color: #666666; font-size: 24rpx; font-weight: 700">共{{ peopleList.length }}人</view>
		<view v-if="peopleList.length == 0" style="padding: 28rpx 0; text-align: center; color: #666666; font-size: 24rpx; font-weight: 700">暂无数据！</view>
		<!-- 加号 -->
		<view @click="goAdd" style="font-size: 0; position: fixed; bottom: 240rpx; right: 32rpx">
			<image style="width: 136rpx; height: 136rpx" src="./static/20.png"></image>
		</view>
		<!-- 删除确认弹窗 -->
		<uni-popup ref="del" type="center">
			<view style="width: 468rpx; border-radius: 32rpx; overflow: hidden; background: #fff">
				<view style="padding: 54rpx 22rpx 42rpx 22rpx; font-size: 26rpx; color: #333333; font-weight: 700; text-align: center">是否确认删除该员工</view>
				<view style="display: flex">
					<view
						class=""
						@click="cancelDel"
						style="
							height: 92rpx;
							flex: 1;
							border-top: 2rpx solid #f4f4f4;
							border-right: 2rpx solid #f4f4f4;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 30rpx;
							font-weight: 700;
							color: rgba(0, 0, 0, 0.6);
						"
					>
						取消
					</view>
					<view
						class=""
						@click="confirmDel"
						style="
							height: 92rpx;
							flex: 1;
							border-top: 2rpx solid #f4f4f4;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 30rpx;
							font-weight: 700;
							color: #c2514a;
						"
					>
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tiaozheng" type="center">
			<view
				class=""
				style="
					width: 468rpx;
					min-height: 270rpx;
					max-height: 100%;
					background: linear-gradient(rgba(235, 190, 135, 0.2), rgba(255, 255, 255, 1) 100%), rgba(255, 255, 255, 1);
					border-radius: 32rpx;
					display: flex;
					flex-direction: column;
					padding: 20rpx 0;
					position: relative;
				"
			>
				<view style="text-align: center; font-size: 32rpx; color: #333; font-weight: 600; margin-top: 25rpx">调整返利会员</view>
				<uni-icons type="clear" size="30" color="#e9ddcf" style="position: absolute; top: 24rpx; right: 20rpx" @click="$refs.tiaozheng.close()"></uni-icons>

				<view style="width: 400rpx; margin: 0 auto; margin-top: 44rpx">
					<view style="border-radius: 48rpx; height: 68rpx;width: 100%font-size: 28rpx;margin-top: 40rpx; border:1px solid rgba(205, 205, 205, 1);display: flex;">
						<view style="width: 80%; margin-left: 16rpx; margin-top: 10rpx">
							<input type="text" placeholder="真实姓名" v-model="form.true_name" />
							<!-- {{selectItem.nickname}} -->
						</view>
						<view style="flex: 1; color: #333; line-height: 68rpx"></view>
					</view>
					<view style="border-radius: 48rpx; height: 68rpx;width: 100%font-size: 28rpx;margin-top: 40rpx; border:1px solid rgba(205, 205, 205, 1);display: flex;">
						<view style="width: 80%; margin-left: 16rpx; margin-top: 10rpx">
							<input type="digit" placeholder="调整金额金额" v-model="form.money" />
						</view>
						<view style="flex: 1; color: #333; line-height: 68rpx">(元)</view>
					</view>
					<view
						style="
							border-radius: 48rpx;
							height: 68rpx;
							width: 100%;
							color: #fff;
							text-align: center;
							line-height: 68rpx;
							font-size: 28rpx;
							margin-top: 40rpx;
							background: rgba(235, 190, 135, 1);
						"
						@click="handeSubmit"
					>
						提交
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			showv: false,
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#ffffff',
			list: [
				{
					shopname: '请选择店铺'
				}
			],
			shopId: 4,
			index: 0,
			textNum: 0,
			keyWords: '',
			navIndex: 0, //nav选项
			showTime: false,
			startDate: '',
			endDate: '',
			sort: 1, //1升序 2降序
			peopleList: [],
			page: 1,
			lastPage: 0,
			selectItem: {},
			identity: '',
			total: 0,
			quota_total: 0,
			rebate_total: 0,
			form: {
				money: '',
				true_name: '',
				shop_id: 0,
				user_id: 0
			}
		};
	},
	onReachBottom() {
		if (this.page < this.lastPage) {
			this.page++;
			this.getList();
		} else {
			this.$wanlshop.msg('我是有底线的');
		}
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.shopId = obj.shopId;
		this.form.shop_id = obj.shopId;
		this.index = obj.index;
		this.getShopList();
	},
	onShow() {
		this.page = 1;
		this.getList();
		this.getShopUserList();
	},
	methods: {
		//搜索
		search() {
			this.page = 1;
			this.getList();
		},
		// 选择开始日期
		change(e) {
			this.startDate = e;
		},
		// 选择结束日期
		change1(e) {
			this.endDate = e;
		},
		// 筛选
		screen() {
			this.page = 1;
			this.getList();
			this.showTime = false;
		},
		//点击起始时间
		clickTime(e) {
			if (e == 1) {
				this.$refs.time1.show();
			} else {
				this.$refs.time2.show();
			}
		},
		//点击nav选项
		changeNavIndex(e) {
			if (e == 2) {
				this.showTime = !this.showTime;
				this.showv = !this.showv;
				return;
			}
			if (this.navIndex == e) {
				this.sort = this.sort == 1 ? 2 : 1;
			} else {
				this.navIndex = e;
				this.sort = 2;
			}
			this.page = 1;
			this.getList();
		},
		//点击加号
		goAdd() {
			uni.navigateTo({
				url: '/pages/schedule/addRebate2?shopId=' + this.shopId
			});
		},
		//点击离职
		quit(item, index) {
			this.item = item;
		},
		//拨打电话
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e,
				success: (res) => {},
				fail: (res) => {}
			});
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.list = res.data.data;
			});
		},
		//获取店铺会员未读数量
		getShopUserList() {
			this.$request({
				url: 'manage/getnotice',
				method: 'POST',
				data: {
					shop_id: this.shopId,
					type: 'shop_user'
				}
			}).then((res) => {
				this.textNum = res.data.data.shop_user_count;
			});
		},
		//获取列表
		getList() {
			this.$request({
				url: 'wokers/worker_list',
				method: 'POST',
				data: {
					order: this.navIndex == 0 ? 'quota' : 'rebate',
					sort: this.sort == 2 ? 'desc' : 'asc',
					keyword: this.keyWords,
					star_time: this.startDate,
					end_time: this.endDate,
					page: this.page,
					shop_id: this.shopId
				}
			}).then((res) => {
				if (this.page == 1) {
					this.peopleList = res.data.data.data;
				} else {
					this.peopleList.push(...res.data.data.data);
				}
				this.identity = res.data.data.iden;
				this.lastPage = res.data.data.last_page;
				this.total = res.data.data.total;
				this.quota_total = res.data.data.quota_total.toFixed(2);
				this.rebate_total = res.data.data.rebate_total.toFixed(2);
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.list[e].id;
			this.page = 1;
			this.index = e;
			this.getList();
		},
		handeTz(item) {
			this.selectItem = item;
			this.form.user_id = item.id;
			this.form.money = item.quota;
			this.form.name = item.name;
			this.$refs.tiaozheng.open();
		},
		gotosh() {
			let data = {
				shop_id: this.shopId,
				uid: uni.getStorageSync('userInfo').id
			};
			uni.navigateTo({
				url: `/pages/schedule/addRebatesh?data=${JSON.stringify(data)}`
			});
		},
		handeSubmit() {
			this.$request({
				url: 'wokers/user_edit',
				method: 'POST',
				data: this.form
			}).then((res) => {
				uni.showToast({
					title: '调整成功',
					icon: 'success'
				});
				this.$refs.tiaozheng.close();
				this.getList();
			});
		},
		gotoF(id) {
			uni.navigateTo({
				url: `/pages/filePages/membershipPage/returnRecord?shopId=${this.shopId}&userId=${id}`
			});
		}
	}
};
</script>
<style>
page {
	background: #f4f5f9;
}
</style>
<style scoped lang="scss">
.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.flex-clum {
	flex-direction: column;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-evenly {
	justify-content: space-evenly;
}

.tab_nav {
	background-color: #fff;
}
.menu {
	width: 94%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;

	.left {
		width: 70%;
		display: flex;

		.img {
			width: 84rpx;
			height: 84rpx;
		}

		.text {
			margin-left: 20rpx;
			margin-top: 24rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.right {
		width: 30%;
		height: 100%;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		/deep/.uni-badge--x {
			vertical-align: top;
		}
	}
}
.arrow {
	width: 24rpx;
	height: 24rpx;
	transition: all 300ms;
}
.showv {
	transform: rotate(180deg);
}
.boxs {
	width: 100%;
	padding: 0 32rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	.warp {
		display: flex;
		justify-content: space-between;
		border-radius: 20rpx;
		background: #fff;
	}
	.item {
		flex: 1;
		text-align: center;
		padding-bottom: 20rpx;
		.text1 {
			font-size: 44rpx;
			color: #333;
			margin-top: 20rpx;
		}
		.text2 {
			font-size: 24rpx;
			color: #333;
			margin-top: 10rpx;
		}
	}
}
.boxs1 {
	width: 100%;
	padding: 0 32rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	.warp {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 32rpx 64rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
	.item {
		text-align: center;
		.text1 {
			height: 62rpx;
			line-height: 52rpx;
			font-size: 44rpx;
			color: #333;
			font-family: AppleSystemUIFont;
		}
		.text2 {
			line-height: 34rpx;
			font-size: 24rpx;
			color: #333333;
			margin-top: 4rpx;
		}
	}
}
.btnBlock {
	display: flex;
	justify-content: flex-end;
	padding-top: 20rpx;
	button {
		margin: 0;
		width: 150rpx;
		height: 54rpx;
		background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
		border-radius: 10rpx;
		line-height: 54rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}
}
.confirm {
	width: 375rpx;
	height: 88rpx;
	background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
	font-size: 28rpx;
	font-weight: normal;
	color: #ffffff;
}
.reset {
	width: 375rpx;
	height: 88rpx;
	background: #f9ecdb;
	font-size: 28rpx;
	font-weight: normal;
	color: #d09f65;
}
</style>
